<template>
    <div id="app">
        <!-- 登录页面 -->
        <Login v-if="!isLoggedIn" @login-success="handleLoginSuccess"/>

        <!-- 主应用界面 -->
        <div v-else>
            <!-- 导航栏 -->
            <el-header class="app-header">
                <div class="header-content">
                    <h1 class="system-title">浙旅拍计划管理系统</h1>
                    <div style="display: flex;align-items: center">
                        <el-menu
                                :default-active="activeIndex"
                                style="border-radius: 5px;height: 40px;display: flex;align-items: center;overflow: hidden"
                                mode="horizontal"
                                @select="handleSelect">
                            <el-menu-item index="1">首页</el-menu-item>
                            <el-menu-item index="2">场所管理</el-menu-item>
                            <el-menu-item index="3">创作者管理</el-menu-item>
                            <el-menu-item index="4">订单管理</el-menu-item>
                            <el-menu-item index="5">时间段管理</el-menu-item>
                        </el-menu>
                    </div>

                    <div class="user-info">
                        <el-dropdown @command="handleUserCommand" trigger="click">
                            <div class="user-avatar-wrapper">
                                <el-avatar
                                        :size="36"
                                        :src="userInfo.avatar"
                                        class="user-avatar">
                                    <i class="el-icon-user-solid"></i>
                                </el-avatar>
                                <div class="user-details">
                                    <span class="user-name">{{ userInfo.name }}</span>
                                    <span class="user-role">{{ userInfo.role }}</span>
                                </div>
                                <i class="el-icon-arrow-down user-arrow"></i>
                            </div>
                            <el-dropdown-menu slot="dropdown" class="user-dropdown">
                                <el-dropdown-item command="profile">
                                    <i class="el-icon-user"></i>
                                    个人信息
                                </el-dropdown-item>
                                <el-dropdown-item command="settings">
                                    <i class="el-icon-setting"></i>
                                    系统设置
                                </el-dropdown-item>
                                <el-dropdown-item divided command="logout">
                                    <i class="el-icon-switch-button"></i>
                                    退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </el-header>

            <!-- 主要内容区域 -->
            <el-main class="app-main">
                <!-- 首页内容 -->
                <div v-if="activeIndex === '1'" class="home-content">
                    <!-- 欢迎区域 -->
                    <el-alert
                            title="欢迎使用场所预约管理系统"
                            type="info"
                            description="这里是系统的主要功能介绍和快速操作入口"
                            show-icon
                            :closable="false">
                    </el-alert>

                    <!-- 功能卡片区域 -->
                    <el-row :gutter="20" class="feature-cards">
                        <el-col :xs="24" :sm="12" :md="6" v-for="feature in features" :key="feature.id">
                            <el-card class="feature-card" shadow="hover"
                                     @click.native="handleFeatureClick(feature.index)">
                                <div class="feature-content">
                                    <i :class="feature.icon" class="feature-icon"></i>
                                    <h3 class="feature-title">{{ feature.title }}</h3>
                                    <p class="feature-description">{{ feature.description }}</p>
                                    <el-button type="primary" size="small">{{ feature.buttonText }}</el-button>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <!-- 统计数据区域 -->
                    <el-row :gutter="20" class="stats-section">
                        <el-col :xs="24" :sm="12" :md="6" v-for="stat in stats" :key="stat.id">
                            <el-card class="stat-card" shadow="never">
                                <div class="stat-content">
                                    <div class="stat-number">{{ stat.value }}</div>
                                    <div class="stat-label">{{ stat.label }}</div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>

                <!-- 场所管理页面 -->
                <VenueManagement v-if="activeIndex === '2'"/>

                 <!-- 创作者管理页面 -->
                <CreatorManagement v-if="activeIndex === '3'"/>

                <!-- 订单管理页面 -->
                <OrderManagement v-if="activeIndex === '4'"/>

                <!-- 时间段管理页面 -->
                <TimePeriodManagement v-if="activeIndex === '5'"/>

                <!-- 系统设置 主入口 -->
                <SystemSettingManagement v-if="activeIndex === '99'"/>
            </el-main>

            <!-- 个人信息编辑对话框 -->
            <el-dialog
                    title="个人信息"
                    :visible.sync="showProfileDialog"
                    width="500px"
                    :close-on-click-modal="false"
                    class="profile-dialog">
                <el-form
                        :model="profileForm"
                        :rules="profileRules"
                        ref="profileForm"
                        label-width="80px"
                        class="profile-form">

                    <!-- 头像上传 -->
                    <el-form-item label="头像">
                        <div class="avatar-upload-wrapper">
                            <el-upload
                                    class="avatar-uploader"
                                    action="#"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload"
                                    :auto-upload="false">
                                <el-avatar
                                        v-if="profileForm.avatar"
                                        :src="profileForm.avatar"
                                        :size="80"
                                        class="avatar-preview">
                                </el-avatar>
                                <div v-else class="avatar-placeholder">
                                    <i class="el-icon-plus"></i>
                                    <div class="upload-text">点击上传头像</div>
                                </div>
                            </el-upload>
                        </div>
                    </el-form-item>

                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="profileForm.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="profileForm.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>

                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="profileForm.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>

                    <el-form-item label="部门">
                        <el-input v-model="profileForm.department" placeholder="请输入部门"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="handleCancelProfile">取消</el-button>
                    <el-button type="primary" @click="handleSaveProfile">保存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import VenueManagement from './components/VenueManagement.vue'
import CreatorManagement from './components/CreatorManagement.vue'
import OrderManagement from './components/OrderManagement.vue'
import TimePeriodManagement from './components/TimePeriodManagement.vue'
import SystemSettingManagement from '@/view/system/SystemSettingManagement.vue'
import Login from './components/Login.vue'
import {authAPI} from './api/auth.js'

export default {
    name: 'App',
    components: {
        VenueManagement,
        CreatorManagement,
        OrderManagement,
        TimePeriodManagement,
        SystemSettingManagement,
        Login
    },
    data() {
        return {
            isLoggedIn: false,
            currentUser: '',
            activeIndex: '1',
            userInfo: {
                name: '管理员',
                role: '系统管理员',
                avatar: '',
                email: 'admin@example.com',
                phone: '138****8888',
                department: '信息技术部'
            },
            showProfileDialog: false,
            profileForm: {
                name: '',
                email: '',
                phone: '',
                department: '',
                avatar: ''
            },
            profileRules: {
                name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                email: [{required: true, message: '请输入邮箱', trigger: 'blur'}],
                phone: [{required: true, message: '请输入手机号', trigger: 'blur'}]
            },
            features: [
                {
                    id: 1,
                    index: '2',
                    icon: 'el-icon-office-building',
                    title: '场所管理',
                    description: '管理场所信息、设施配置和基本设置',
                    buttonText: '进入管理'
                },
                 {
                    id: 2,
                    index: '3',
                    icon: 'el-icon-user',
                    title: '创作者管理',
                    description: '管理创作者信息、作品和基本设置',
                    buttonText: '进入管理'
                },
                {
                    id: 3,
                    index: '4',
                    icon: 'el-icon-document',
                    title: '订单管理',
                    description: '查看、审核和处理场所预约订单',
                    buttonText: '查看订单'
                },
                {
                    id: 4,
                    index: '5',
                    icon: 'el-icon-time',
                    title: '时间段管理',
                    description: '管理场所时间段、价格和可预约状态',
                    buttonText: '时间管理'
                },
                // {
                //     id: 5,
                //     index: '1',
                //     icon: 'el-icon-data-analysis',
                //     title: '数据统计',
                //     description: '查看预约数据、收入统计和使用分析',
                //     buttonText: '查看报表'
                // }
            ],
            stats: [
                {
                    id: 1,
                    value: '156',
                    label: '总场所数'
                },
                {
                    id: 2,
                    value: '1,234',
                    label: '总订单数'
                },
                {
                    id: 3,
                    value: '89',
                    label: '今日预约'
                },
                {
                    id: 4,
                    value: '¥12,580',
                    label: '今日收入'
                }
            ]
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            this.activeIndex = key
            console.log(key, keyPath)
        },
        handleFeatureClick(index) {
            this.activeIndex = index
        },
        handleLoginSuccess() {
            this.isLoggedIn = true
            this.currentUser = authAPI.getCurrentUser() || '管理员'
            this.userInfo.name = this.currentUser
            this.$message.success('欢迎回来！')
        },
        // 保存个人信息
        async handleSaveProfile() {
            try {
                await this.$refs.profileForm.validate()
                // 这里可以调用API保存用户信息
                this.userInfo = {...this.profileForm}
                this.showProfileDialog = false
                this.$message.success('个人信息更新成功')
            } catch (error) {
                console.log('表单验证失败:', error)
            }
        },
        // 取消编辑个人信息
        handleCancelProfile() {
            this.showProfileDialog = false
            this.$refs.profileForm && this.$refs.profileForm.resetFields()
        },
        // 上传头像
        handleAvatarSuccess(response, file) {
            this.profileForm.avatar = URL.createObjectURL(file.raw)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },
        handleUserCommand(command) {
            switch (command) {
                case 'profile':
                    this.showProfileDialog = true
                    this.profileForm = {...this.userInfo}
                    break
                case 'settings':
                    //this.$message.info('系统设置功能开发中...')
                    //跳转到系统设置
                    this.activeIndex = '99'
                    break
                case 'logout':
                    this.$confirm('确定要退出登录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        authAPI.logout()
                        this.isLoggedIn = false
                        this.currentUser = ''
                        this.userInfo = {
                            name: '管理员',
                            role: '系统管理员',
                            avatar: '',
                            email: 'admin@example.com',
                            phone: '138****8888',
                            department: '信息技术部'
                        }
                        this.$message.success('已退出登录')
                    }).catch(() => {
                    })
                    break
            }
        },
        checkLoginStatus() {
            this.isLoggedIn = authAPI.checkAuth()
            if (this.isLoggedIn) {
                this.currentUser = authAPI.getCurrentUser() || '管理员'
            }
        }
    },
    mounted() {
        this.checkLoginStatus()
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    background-color: #f0f2f5;
}

#app {
    min-height: 100vh;
}

/* 头部样式 */
.app-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /*color: white;*/
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 60px;
    line-height: 60px;
}

.header-content {
    /*max-width: 1200px;*/
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
}

.system-title {
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0;
    color: white;
    flex-shrink: 0;
}

.header-menu {
    border-bottom: none;
    background: transparent;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 40px;
    max-height: 40px;
    overflow: hidden;
}

/*.header-menu::before {*/
/*  content: '';*/
/*  position: absolute;*/
/*  bottom: 0;*/
/*  left: 50%;*/
/*  transform: translateX(-50%);*/
/*  width: 80%;*/
/*  height: 1px;*/
/*  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);*/
/*}*/

.header-menu .el-menu-item {
  border-bottom: none;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 15px;
  background: transparent;
  border-radius: 12px;
  margin: 0 6px;
  padding: 8px 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.5px;
  height: 40px;
  line-height: 1.2;
  max-height: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.header-menu .el-menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.header-menu .el-menu-item:hover::before {
  left: 100%;
}

.header-menu .el-menu-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-menu .el-menu-item.is-active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
  color: white;
  border-bottom: none;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: none;
  height: 40px;
  max-height: 40px;
  min-height: 40px;
  overflow: hidden;
  box-sizing: border-box;
}

.header-menu .el-menu-item.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, white, transparent);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.user-info {
    color: white;
    flex-shrink: 0;
}

/* 用户头像区域样式 */
.user-avatar-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    padding: 10px 18px;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    position: relative;
    overflow: hidden;
}

.user-avatar-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.user-avatar-wrapper:hover::before {
    left: 100%;
}

.user-avatar-wrapper:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.user-avatar {
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-avatar-wrapper:hover .user-avatar {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.user-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 85px;
}

.user-name {
    font-size: 15px;
    font-weight: 700;
    color: white;
    margin-bottom: 3px;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.3px;
}

.user-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-arrow {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-avatar-wrapper:hover .user-arrow {
    transform: translateY(2px) rotate(180deg);
    color: white;
}

/* 用户下拉菜单样式 */
::v-deep .user-dropdown {
    margin-top: 12px;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.95);
}

::v-deep .user-dropdown .el-dropdown-menu__item {
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

::v-deep .user-dropdown .el-dropdown-menu__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.6s ease;
}

::v-deep .user-dropdown .el-dropdown-menu__item:hover::before {
    left: 100%;
}

::v-deep .user-dropdown .el-dropdown-menu__item:hover {
    background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
    color: #667eea;
    transform: translateX(4px);
    box-shadow: inset 4px 0 0 #667eea;
}

::v-deep .user-dropdown .el-dropdown-menu__item i {
    margin-right: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
}

::v-deep .user-dropdown .el-dropdown-menu__item:hover i {
    transform: scale(1.1);
    color: #667eea;
}

/* 主要内容区域 */
.app-main {
    padding: 30px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: calc(100vh - 60px);
    position: relative;
}

.app-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    pointer-events: none;
}

.home-content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.home-content .el-alert {
    margin-bottom: 40px;
    border-radius: 16px;
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.9);
}

/* 功能卡片样式 */
.feature-cards {
    margin-bottom: 40px;
}

.feature-card {
    margin-bottom: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.8s ease;
}

.feature-card:hover::before {
    left: 100%;
}

.feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 32px rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.card-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    margin-bottom: 16px;
}

.feature-icon {
    font-size: 28px;
    margin-right: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

.feature-title {
    font-size: 18px;
    color: #2c3e50;
    font-weight: 700;
    margin: 0;
}

.feature-content {
    padding: 24px;
}

.feature-content h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: #2c3e50;
    font-weight: 700;
}

.feature-content p {
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 14px;
}

.feature-content .el-button {
    width: 100%;
    border-radius: 12px;
    font-weight: 600;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    transition: all 0.3s ease;
}

.feature-content .el-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* 统计卡片样式 */
.stats-section {
    margin-top: 30px;
}

.stat-card {
    text-align: center;
    margin-bottom: 24px;
    border-radius: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 32px rgba(102, 126, 234, 0.1);
}

.stat-content {
    padding: 32px 20px;
    position: relative;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.stat-card:hover .stat-number {
    transform: scale(1.05);
}

.stat-label {
    color: #64748b;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 个人信息对话框样式 */
::v-deep .profile-dialog {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(20px);
}

::v-deep .profile-dialog .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 24px 32px;
    border-bottom: none;
    position: relative;
}

::v-deep .profile-dialog .el-dialog__header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

::v-deep .profile-dialog .el-dialog__title {
    color: white;
    font-weight: 700;
    font-size: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

::v-deep .profile-dialog .el-dialog__headerbtn {
    top: 24px;
    right: 32px;
}

::v-deep .profile-dialog .el-dialog__close {
    color: white;
    font-size: 20px;
}

.profile-form {
    padding: 32px 0;
    background: rgba(255, 255, 255, 0.98);
}

.avatar-upload-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.avatar-uploader {
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.avatar-preview {
    border: 4px solid rgba(102, 126, 234, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.avatar-preview:hover {
    border-color: #667eea;
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);
}

.avatar-placeholder {
    width: 80px;
    height: 80px;
    border: 3px dashed rgba(102, 126, 234, 0.3);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
    position: relative;
    overflow: hidden;
}

.avatar-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.6s ease;
}

.avatar-placeholder:hover::before {
    left: 100%;
}

.avatar-placeholder:hover {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transform: scale(1.05);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.avatar-placeholder:hover i,
.avatar-placeholder:hover .upload-text {
    color: white;
}

.avatar-placeholder i {
    font-size: 28px;
    color: #667eea;
    margin-bottom: 6px;
    transition: all 0.3s ease;
}

.upload-text {
    font-size: 11px;
    color: #667eea;
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
    transition: all 0.3s ease;
}

::v-deep .profile-form .el-form-item__label {
    color: #2c3e50;
    font-weight: 600;
    font-size: 15px;
}

::v-deep .profile-form .el-input__inner {
    border-radius: 12px;
    border: 2px solid rgba(102, 126, 234, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 12px 16px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

::v-deep .profile-form .el-input__inner:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(102, 126, 234, 0.15);
    background: white;
    transform: translateY(-1px);
}

::v-deep .profile-form .el-input__inner:hover {
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.dialog-footer {
    text-align: right;
    padding: 24px 32px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    background: rgba(248, 249, 255, 0.5);
    backdrop-filter: blur(10px);
}

.dialog-footer .el-button {
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.dialog-footer .el-button--primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.dialog-footer .el-button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.dialog-footer .el-button:not(.el-button--primary) {
    border: 2px solid rgba(102, 126, 234, 0.2);
    color: #667eea;
    background: rgba(255, 255, 255, 0.8);
}

.dialog-footer .el-button:not(.el-button--primary):hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        height: auto;
        padding: 15px 20px;
    }

    .header-content h1 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .header-right {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .header-menu {
        width: 100%;
    }

    .app-main {
        padding: 15px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .user-info {
        align-self: flex-end;
    }

    .user-avatar-wrapper {
        padding: 6px 12px;
        gap: 8px;
    }

    .user-details {
        min-width: 60px;
    }

    .user-name {
        font-size: 13px;
    }

    .user-role {
        font-size: 11px;
    }

    ::v-deep .profile-dialog {
        width: 90% !important;
    }

    .avatar-placeholder {
        width: 60px;
        height: 60px;
    }

    .avatar-placeholder i {
        font-size: 20px;
    }

    .upload-text {
        font-size: 9px;
    }
}
</style>
